<template>
  <!-- 新闻播报 -->
  <view>
    <view v-if="itemNew.length" class='news acea-row row-middle' :style="[boxStyle]">
      <view class='pictrue skeleton-rect'>
        <image :src='logoConfig'></image>
      </view>
      <view class='swiperTxt skeleton-rect'>
        <view class="acea-row row-between-wrapper" v-if="direction" @click="moreTab(itemNew[0].chiild[1].val)">
          <uniNoticeBar scrollable="true" showGetMore="true" background-color="#fff" :color="textColor"
                        moreColor="#888" :speed='50' single="true" :text="itemNew[0].chiild[0].val"></uniNoticeBar>
          <view class="iconfont icon-xiangyou"></view>
        </view>
        <swiper v-else :indicator-dots="indicatorDots" :autoplay="autoplay" interval="2500" :duration="duration"
                vertical="true" circular="true">
          <block v-for="(item,index) in itemNew" :key='index'>
            <swiper-item catchtouchmove='catchTouchMove'>
              <view @click="moreTab(item.chiild[1].val)" class='acea-row row-between-wrapper'
                    hover-class='none'>
                <view class='text acea-row row-between-wrapper'>
                  <view class='newsTitle line1' :style="{color:textColor}">
                    {{ item.chiild[0].val }}
                  </view>
                </view>
                <view class='iconfont icon-xiangyou'></view>
              </view>
            </swiper-item>
          </block>
        </swiper>
      </view>
    </view>
  </view>
</template>

<script>
import uniNoticeBar from '@/components/uniNoticeBar/uni-notice-bar.vue';

export default {
  components: {
    uniNoticeBar
  },
  name: 'news',
  props: {
    dataConfig: {
      type: Object,
      default: () => {
      }
    },
    isSortType: {
      type: String | Number,
      default: 0
    }
  },
  data() {
    return {
      indicatorDots: false,
      autoplay: true,
      duration: 500,
    };
  },
  computed: {
    //文本列表
    itemNew() {
      return this.dataConfig.listConfig.list
    },
    //图标设置
    logoConfig() {
      return this.dataConfig.logoConfig.url
    },
    //文本滚动方向
    direction() {
      return this.dataConfig.directionConfig.tabVal
    },
    //最外层盒子的样式
    boxStyle() {
      return {
        borderRadius: this.dataConfig.bgStyle.val * 2 + 'rpx',
        background: `linear-gradient(${this.dataConfig.bgColor.color[0].item}, ${this.dataConfig.bgColor.color[1].item})`,
        margin: this.dataConfig.mbConfig.val * 2 + 'rpx' + ' ' + this.dataConfig.lrConfig.val * 2 + 'rpx' +
            ' ' + 0,
        padding: this.dataConfig.upConfig.val * 2 + 'rpx' + ' ' + '20rpx' + ' ' + this.dataConfig.downConfig
            .val * 2 + 'rpx',
        color: this.dataConfig.textColor.color[0].item
      }
    },
    //文字位置
    txtStyle() {
      let txtStyle = this.dataConfig.textPosition.tabVal;
      if (txtStyle == 0) {
        return {
          'text-align': 'left'
        }
      } else if (txtStyle == 1) {
        return {
          'text-align': 'center'
        }
      } else {
        return {
          'text-align': 'right'
        }
      }
    },
    //文字颜色
    textColor() {
      return this.dataConfig.textColor.color[0].item
    },
  },
  methods: {
    moreTab(url) {
      this.$util.navigateTo(url);
    }
  }
}
</script>

<style lang="scss" scoped>
.news {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  box-shadow: 0 10rpx 30rpx #f5f5f5;
}

.news .pictrue {
  width: 130rpx;
  height: 36rpx;
  border-right: 1rpx solid #ddd;
  padding-right: 23rpx;
  box-sizing: content-box;
}

.news .pictrue image {
  width: 100%;
  height: 100%;
}

.news .swiperTxt {
  width: 536rpx;
  height: 78rpx;
  line-height: 78rpx;
  overflow: hidden;
  margin-left: 22rpx;
}

.news .swiperTxt .text {
  width: 89%;
}

.news .swiperTxt .text .label {
  font-size: 20rpx;
  color: #ff4c48;
  width: 64rpx;
  height: 30rpx;
  border-radius: 40rpx;
  text-align: center;
  line-height: 28rpx;
  border: 2rpx solid #ff4947;
}

.news .swiperTxt .text .newsTitle {
  width: 100%;
  font-size: 24rpx;
  color: #666;
}

.news .swiperTxt .iconfont {
  font-size: 28rpx;
  color: #888;
}

.news .swiperTxt swiper {
  height: 100%;
}
</style>